“Sliding Doors” is a “story” published
by AO3 volunteers to demonstrate some of what you can do with normal CSS options available on the site. You can
check out their tutorial for more, or
look at some of the guides below. If you think that something is missing from one of these lists, then let me
know!
- “Decorations for
Fic,” by Jnsn, covers dividers, a chessboard whose pieces move when the board is hovered over,
music, chapter titles, image outlines, drop caps, margin images, timetables, and news articles.
- “The Fic Writer's
Guide to Formatting (An AO3 Repository),” by AnisaAnisa, covers HTML, links and images, page
dividers, tables, borders, boxes, and customizations of fonts, links, titles, and usernames.
- “How to
Override the Archive's Automated Chapter Headers,” by C Ryan Smith.
- “How to Use the
newly available details and summary code,” by watcherless, shows you how to make clickable spoilers.
- “The Nice and Accurate Guide to
Footnotes,” by Vigs, explains how to make simple footnotes, clickable footnotes that move you around
the page, and mouseover footnotes that can be hovered over (or clicked, on mobile).
- “Ruby
Text,” by Elsepth, lets you stack words in superscript above other words.
- “Skin for Putting
Music Indicators in Your Fic,” by SpookyTesting.
- “Highlight comments of your favourite
readers!,” by ElectricAlice.
La_Temperanza has a host of useful, general-purpose tutorials with self-explanatory titles:
Formatting for analog media (click for list)
- Letters and other stationery: “How to Mimic Letters, Fliers, and Stationery Without Using Images,” by
La_Temperanza
- Mission reports and other official documentation: “AO3 Work Skin for
In-Universe Investigative/Mission Report With Redaction,” by wafflelate, includes the option to
██████ text (but a little more nicely than it looks here).
- Newspaper: “Newspaper Article,”
by lordvoldemortsskin, includes the name of the paper, the headline, subheading, and a variable number
of columns. “A simple newspaper format for CSS,” by Anubis_2701, is mostly equivalent. “How to Make Newspaper Articles on
AO3,” by La_Temperanza, just covers the body text.
- Notebook paper: “How to Create
Notebook Lined Paper on AO3,” by La_Temperanza, also has an option for yellow legal paper.
- Sticky notes: “Sticky Notes on AO3 Without Using Images,” by La_Temperanza, with an example here.
Formatting for digital media (click for list)
- AO3: “How to Mimic Author's Notes
and Kudos/Comments Buttons,” by La_Temperanza, is useful not only if you're writing a next-gen
fic where the kids have access to AO3, but also if you want to pull meta bullshit and let your story go
on after the end. “Put an AO3 Fic in YOUR Fic!,” by lordvoldemortsskin, covers everything from the
tag box to the comments.
- Blog, Livejournal: “How to Mimic LiveJournal Posts and Comments,” by cursedcuriosities.
- Blog, Tumblr: “Tumblr-style CSS Tweaks,” by Aposiopesis. “Plain
Text Social Media Forms,” by Anubis_2701, is a simpler version.
- Blog, Twitter: “Twitter Workskin: Tweets & Profile (newest layout),” by starskin. “Plain Text
Social Media Forms,” by Anubis_2701, is a simpler version.
- Chat, Discord: “Discord Work Skin & Tutorial,” by BookKeep. “Discord Work
Skin,” by unpredictableArtist.
- Chat, Facebook: “Facebook Post Work
Skin,” by amerikate. “How to
Make Facebook Messenger Chat on AO3,” by ran_a_dom, also works.
- Chat, Grindr: “How to Make Grindr Messages on AO3,” by DesignatedGrape.
- Chat, Instagram: “Instagram DMs for AO3,” by monarch_v. “Plain
Text Social Media Forms,” by Anubis_2701, is a simpler version.
- Chat, iOS Messenger: “How to Make iOS Text Messages on AO3,” by CodenameCarrot and La_Temperanza.
Codename Carrot has a collection of emojis that are valid as of 2016 (more may be accessible now, I
don't know).
- Chat, LIME Chat: “A3! LIME Work Skin,” by associate.
- Chat, LINE Chat: “How to Make LINE Chat on AO3,” by ran_a_dom.
- Chat, Twitch: “Twitch Chat Work Skin,” by Anonymous
- Chat, Snapchat: “Snapchat Skin,” by Azdaema Codes.
- Chat, WhatsApp: “WhatsApp Skin,” by Azdaema Codes, and “WhatsApp group
chat skin,” by ovely.
- Chat, Zoom: “Zoom
inspired AO3 skin,” by mystyrust.
- Email, generic: “How to Mimic Email
Windows,” by La_Temperanza.
- Email, Gmail: “Gmail Email
Skin,” by sunsetcurbed.
- Forum, generic: “AO3 Workskin for
Forum Thread,” by fencesit.
- Forum, Reddit: “2020 Reddit Work Skin,” by timstokerlovebot.
- Imageboard, 4chan: “How to Mimic 4chan Posts Without Just Taking Screenshots of 4chan,” by
Anonymous.
- News: “How to make a News Website
Article skin on AO3,” by ElectricAlice.
- Other, music playlist, generic: “How to
make a Rounded Playlist,” by La_Temperanza and layouttest, will let you
code a dummy music playlist with a nice border, displaying song titles, song artists, and time stamps.
- Other, Wikipedia: “Wikipedia Article Work Skin,” by styletests
- Review, Amazon: “[Work Skin] Amazon
Reviews,” by kiwiana.
- Review, Yelp: “[Work Skin] Yelp
Reviews,” by kiwiana.
- Search engine, Google: “Google Search Suggestions Work Skin & Tutorial,” by BookKeep